// import React from 'react';

// 函数组件
// const App = () => {
//   return (
//     <div>
//       <h3>
//       App组件rfc
//       </h3>
//     </div>
//   );
// }

// 类组件
// import React, { Component } from 'react';
// class App extends Component {
//   render() {
//     return (
//      <div>
//        你好，react
//      </div>
//     );
//   }
// }
// export default App;

// import React from 'react';
// // 函数组件没有this
// const App = () => {

//   let title = 'aaaa'

//   const fn = () => {
//     // 直接修改成员属性数据，视图不会更新，知道一下就可以
//     title = Date.now() + ''
//     console.log(title);
//   }

//   return (
//     <div>
//       <h3>{title}</h3>
//       {/* 事件名称为小驼峰 */}
//       {/* 绑定事件，默认不要写小括号 */}
//       <button onClick={fn}>我是一个按钮</button>
//     </div>
//   );

//   // function预编译时它完成了变量提升和赋值
//   /* function fn(){
//     console.log('点击事件')
//   }*/

// }

// export default App;

import React, { Component } from 'react';

// class App extends Component {
//   render() {
//     let listArr = [];

//     return (
//       <div>
//         <ul>{<li>{listArr}</li>}</ul>
//       </div>
//     );
//   }
// }

class Parent extends Component {
  listArr = [{ id: 0, msg: '我是list' }];

  inputFn = (evt) => {
    if (evt.key === 'Enter') {
      // console.log(evt.target.value);
      if (evt.target.value !== 'admin' && evt.target.value !== 'user') {
        this.listArr.push({
          id: Date.now(),
          msg: evt.target.value,
        });
      }

      // console.log(evt);   //输出事件对象
      // console.log(this);  //输出parent对象
      // console.log(this.listArr);
      this.forceUpdate(); //更新视图
      evt.target.value = ''; //清空输入框
    }
  };

  del = (evt) => {
    // console.log('evt', evt);
    // console.log('evt.target', evt.target); //目标元素
    // console.log('evt.target.dataset', evt.target.dataset); //目标元素的属性，以对象的形式
    if (confirm('确认删除？')) {
      let id = evt.target.dataset.id;
      this.listArr = this.listArr.filter((item) => item.id != id);
    }
    this.forceUpdate(); //更新视图
  };

  render() {
    return (
      <div>
        {<input type="text" onKeyUp={this.inputFn} />}
        <br />
        <ul>
          {this.listArr.map((item) => (
            <li key={item.id}>
              <span>{item.msg}</span>
              {/* 自定义属性 getAttribute 方法获取属性 */}
              {/* 如果属性是以data-开头，它是html5提供一个新的api对象，dataset对象 */}
              <span onClick={this.del} data-id={item.id} data-name={item.msg}>
                --- 删除
              </span>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}
export default Parent;
